<template>
<div>

  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="分组概览" name="first"></el-tab-pane>
    <el-tab-pane label="主机列表" name="second"></el-tab-pane>
  </el-tabs>
  <component :is="currentView" keep-alive :keyMap="keyMap" :parentDesignerData='desigerData' :inputParams='params' :childrenList="devChildList"></component>
</div>
</template>
<script>
import graphComp from 'views/graph/designer.vue'
import hostListComp from './hostList.vue'
import api from 'api/device.js'
export default {
  props: {
    devId: {
      type: String,
      default: function() {
        return '';
      }
    },
    devType: {
      type: Number,
      default: function() {
        return 2;
      }
    }
  },
  watch:{
    devId(){
      this.showFirst();
    }
  },
  data() {
    return {
      activeName: 'first',
      currentView: graphComp,
      keyMap: {
        editable: 'false'
      },
      desigerData: {},
      params: {},
      devChildList: []
    };
  },
  methods: {
    handleClick(tab) {
      if (tab.name == 'second') {
        api.queryHostByGroupid(this.devId).then((response) => {
          this.devChildList = response.data;
        }).catch((err) =>{
            console.error(err);
        });
        this.currentView = hostListComp;
      } else if (tab.name == 'first'){
        this.showFirst();
      }
    },
    showFirst() {
      this.activeName='first';
      this.desigerData = {
        grsNo: this.getGrsNoByType()
      };
      this.params = {
        groupid: this.devId
      };
      this.currentView = graphComp;
    },
    getGrsNoByType() {
      return 'group';
    }
  },
  mounted() {
    this.showFirst();
  },
  components: {
    graphComp,
    hostListComp
  }
};
</script>
